import {
    ElButton,
    ElDescriptions,
    ElDescriptionsItem,
    ElInput,
    ElLink,
    ElMessage
} from 'element-plus'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { useBasicStore } from '@/stores/basic'
import { DeviceEnum } from '@/const/enum'
import type { CompanyInfoDto, WesureInfoDto } from '@/api/company/types'
import { editWesurePrice, getDailyInsurancePlanList } from '@/api/insurance/daily'
import type { DailyPlanDto } from '@/api/insurance/daily/types'

interface DailyPlanItemDto extends DailyPlanDto {
    editable?: boolean
}

@Component
export class InsurancePlanView extends Render {
    @Prop() basicData!: WesureInfoDto
    @Prop() companyBasicInfo!: CompanyInfoDto

    @Emit('refresh')
    handleRefresh() {}

    @Watch('basicData', { immediate: true })
    handleWatchBasicData() {
        this.basicData?.companyId && this.getPlanList()
    }

    basicStore = useBasicStore()

    planList = [] as DailyPlanItemDto[]

    async getPlanList() {
        const res = await getDailyInsurancePlanList({
            companyId: this.basicData?.companyId,
            pageSize: 100,
            pageNum: 1
        })
        res?.list?.forEach((i: DailyPlanItemDto) => {
            i.editable = false
        })
        this.planList = res.list || []
    }

    onEdit(item: DailyPlanItemDto) {
        item.editable = true
    }

    onCancel(item: DailyPlanItemDto) {
        item.editable = false
    }

    async onConfirm(item: DailyPlanItemDto) {
        await editWesurePrice({
            id: item.id,
            price: item.price
        })
        this.onCancel(item)
        ElMessage.success('修改成功')
        this.getPlanList()
    }

    renderItem(item: DailyPlanItemDto) {
        return (
            <>
                <ElDescriptionsItem label-class-name="w-170px" label="开通时间">
                    <div>{this.basicData.productOpenTime}</div>
                </ElDescriptionsItem>
                <ElDescriptionsItem label-class-name="w-170px" label={item.planName}>
                    <div class="flex justify-between items-center">
                        {item.editable ? (
                            <>
                                <ElInput v-model={item.price} placeholder="请输入价格"></ElInput>
                                <div class="flex ml-10px">
                                    <ElButton
                                        size="small"
                                        type="primary"
                                        onClick={() => this.onConfirm(item)}
                                    >
                                        确定
                                    </ElButton>
                                    <ElButton size="small" onClick={() => this.onCancel(item)}>
                                        取消
                                    </ElButton>
                                </div>
                            </>
                        ) : (
                            <>
                                <div>
                                    <span>￥</span>
                                    {item.price}
                                </div>
                                <ElLink
                                    type="primary"
                                    underline={false}
                                    onClick={() => this.onEdit(item)}
                                >
                                    编辑
                                </ElLink>
                            </>
                        )}
                    </div>
                </ElDescriptionsItem>
            </>
        )
    }
    render() {
        return (
            <div>
                <div class="bg-white-dark-100 text-base px-12px py-8px mb-12px">保险方案</div>
                <ElDescriptions
                    border
                    label-width="170"
                    column={this.basicStore.device === DeviceEnum.Mobile ? 1 : 2}
                >
                    {this.planList.map((i) => {
                        return <>{this.renderItem(i)}</>
                    })}
                </ElDescriptions>
            </div>
        )
    }
}

export default toNative<{ basicData: WesureInfoDto }, { refresh: () => void }>(InsurancePlanView)
